import React, { Component } from 'react'
import axios from 'axios'

export default class Life extends Component {
    constructor() {
        super()
        console.log('我是实例期的第一个生命周期---constructor')
    }
    state = {
        list: []
    }
    // 组件  将要  挂载
    componentWillMount() {
        console.log('我是实例期的第二个生命周期---componentWillMount')
    }
    // 渲染
    render() {
        const { list } = this.state
        console.log('我是实例期的第三个生命周期---render')
        return (
            <div>
                {/* <h3 ref="h3">实例期</h3> */}
                <h3 ref={(ref) => {
                    console.log(ref)
                }}>实例期</h3>
                {/* {
                    list.map((item, index) => {
                        return <h3 key={index}>
                            { item.image_src }
                        </h3>
                    })
                } */}
            </div>
        )
    }
    // 组件 完成 挂载
    componentDidMount() {
        // 操作Dom
        // this.refs.h3.innerHTML = "aaaaaaa"
        // console.log(this.refs)
        // 发起请求
        // axios.get("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata").then(res => {
        //     this.setState({
        //         list: res.data.message
        //     })
        // })
        console.log('我是实例期的第四个生命周期---componentDidMount')
    }
}
